<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <b-card>
          <div slot="header">
            <strong>修改密码</strong>
          </div>
          <b-form-fieldset label="用户名：" >
            <input class="form-control col-sm-7" type="text" :disabled="true" placeholder="用户名" v-model="username">
          </b-form-fieldset>
          <!--<b-form-fieldset label="旧密码" description="Please enter your old password">-->
          <b-form-fieldset label="旧密码：">
            <input class="form-control col-sm-7" type="password" name="oldpw" placeholder="输入旧密码" v-model="oldPw">
            <span class="tips" v-show="tipOld">密码格式不正确！</span>
          </b-form-fieldset>
          <b-form-fieldset label="新密码：">
            <input class="form-control col-sm-7" type="password" placeholder="输入新密码" v-model="newPw">
            <span class="tips" v-show="tipNew">密码格式不正确！</span>
          </b-form-fieldset>
          <b-form-fieldset label="确认密码：">
            <input class="form-control col-sm-7" type="password" placeholder="输入确认密码" v-model="againPw">
            <span class="tips" v-show="tipAgain">两次密码不一致！</span>
          </b-form-fieldset>
          <div slot="footer">
            <b-button type="submit" variant="primary" @click="submitInfo()"><i class="fa fa-dot-circle-o"></i> 提交 </b-button>
            <b-button type="submit" variant="danger" @click="resetInfo()"><i class="fa fa-ban"></i> 重置 </b-button>
          </div>
        </b-card>
      </div>
    </div>
  </div>
</template>

<script>
  import { editPassword } from '../service/api'
  export default {
    name: 'forms',
    data () {
      return {
        username: localStorage.getItem('username'),
        oldPw: '',
        newPw: '',
        againPw: '',
        tipOld: false,
        tipNew: false,
        tipAgain: false
      }
    },
    isPass () {
    },
    methods: {
      submitInfo () {
        const reg = /^[\dA-z_]{6,20}$/
        if (!this.oldPw.trim() || !reg.test(this.oldPw)) {
          // this.tipOld = true
          // return false
        } else {
          this.tipOld = false
        }
        if (!this.newPw.trim() || !reg.test(this.newPw)) {
          this.tipNew = true
          return false
        } else {
          this.tipNew = false
        }
        if (this.newPw !== this.againPw || !reg.test(this.againPw)) {
          this.tipAgain = true
          return false
        } else {
          this.tipAgain = false
        }
        console.log(this.username)
        console.log(this.oldPw)
        console.log(this.newPw)
        console.log(this.againPw)
        editPassword({name: this.username, password: this.oldPw, rept: this.newPw})
          .then(({ data, err }) => {
            console.log('err: ' + err)
            console.log('data: ' + data)
            if (data.code === 200) {
              alert('修改成功！')
              this.$router.push({
                path: '/login'
              })
            } else {
              alert(data.msg)
              this.oldPw = ''
              this.newPw = ''
              this.againPw = ''
            }
          })
      },
      resetInfo () {
        this.oldPw = ''
        this.newPw = ''
        this.againPw = ''
      }
    }
  }
</script>
<style>
  .form-control{
    display: inline-block;
  }
  .tips{
    color: #f20000;
  }
</style>
